<template>
  <div>
    <div>
      <div>
        <el-form :inline="true" :model="formInline" class="demo-form-inline" style="margin-top: 2%">
          <el-form-item style="margin-left: 1%;">
            <el-select v-model="formInline.project_name" placeholder="所属项目">
              <el-option v-for="(i,index) in arr " :key="index"
                :label="i.name" :value="i.name"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select v-model="formInline.class_name" placeholder="所属班级">
              <el-option v-for="(i,index) in arrclass" :key="index"
              :label="i.class_name" :value="i.class_name"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- 上下分级 -->
      <div style="overflow: hidden; margin-top: 1%">
        <el-table
          :data="CjiFen"
          border
          stripe
          v-loading="loading"
          style="width: 99%;margin-left: 1%;"
        >
          <el-table-column prop="id" label="序号" width="100"></el-table-column>
          <el-table-column prop="grouping" label="分组名称" ></el-table-column>
          <el-table-column prop="state" label="分组状态" ></el-table-column>
          <el-table-column
            style="text-align: center"
            prop="operation"
            label="操作"
            width="250">
            <el-button @click="drawer = true" size="mini" type="primary">
              编辑
            </el-button>
            <el-button size="mini" type="danger">删除</el-button>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>


<script>
export default {
  data(){
    return{
      dialogVisible:false,
      CjiFen:[],
      formInline: {
        user: '',
        number:'',
        // 项目
        project_name: '',
        // 班级
        class_name:'',
      },
      arr:{},
      arrclass:{}
    }
  },
  methods:{
    // 请求项目
    getstudent() {
      this.$http.get("/api/getstudent").then((res) => {
        console.log(res.data);
        this.arr = res.data
        console.log(this.arr);
      });
    },
    // 请求班级
    outclasss(newValue) {
      this.$http.get(`/api/outclass?project=`+ newValue).then((res) => {
        this.arrclass = res.data
      });
    },
    // 请求分组数据
    grouping(newValue){
      this.$http.get(`/api/getgrouping?grouping=`+newValue).then((res) => {
        this.CjiFen = res.data
        console.log(this.CjiFen)
      });
    },
    onSubmit(){
      const formInline = {}
      for(let i in this.formInline){
        if(this.formInline[i]!=null&&this.formInline[i]!=undefined&&this.formInline[i]!=''){
          formInline[i]=this.formInline[i];
        }
      }
      const _ = this.$http
      _.post(`/api/posttudent`,formInline).then((res) => {
        console.log(res.data)
        this.CjiFen = res.data
      });
    },
  },
  watch:{
    'formInline.project_name'(newValue){
      this.outclasss(newValue)
    },
    'ruleForm.project_name'(newValue){
      this.outclasss(newValue)
    }
  },
  created(){
    this.getstudent()
  },
}
</script>


<style scoped>
/* 提示框 */
  .Cjfz_chao{
    border-radius: 15px;
    line-height: 30px;
    background-color: rgb(212, 306, 301);
    margin-top: 15px;
    margin-left: 4%;
  }
  .Cjfz_p{
    font-size: 12px;
    padding-left: 1%;
  }
  #tj{
    float: right;
    margin-right: 4%;
    margin-top: 1%;
  }
</style>